<template>
    <div ref='wrapper' class="wrapper" :title="text" @mouseover="mouseOver"
      @mouseleave="mouseLeave" @click="testClick">
        <span ref="content" class="content" :className="className">
            {{text}}
        </span>
    </div>
</template>

<script>
export default {
    name: 'com-stringCarousel',
    props: {
        text: String,
        className: String,
        speed: {
            type: Number,
            default: 10
        }
    },
    data() {
        return {
            timer: null,
            stop: false,
        }
    },
    watch: {
        text: {
           immediate: true,
           handler(n) {
               if(n) {
                   this.initScroll();
               }else {
                   cancelAnimationFrame(this.timer);
               }
           } 
        }
    },
    methods: {
        testClick() {

        },
        mouseOver() {
            this.stop = true;
        },
        mouseLeave() {
            this.stop = false;
        },
        delay() {
            if(this.stop) return;
            this.stop = true;
            setTimeout(() => {
                this.stop = false;
            }, 2000)
        },
        initScroll() {

            // let duration = (contentW - wrapper) / 10;
            cancelAnimationFrame(this.timer);
            this.$nextTick(() => {
                let speed = this.speed / 10;
                let wrapper = this.$refs.wrapper;
                let content = this.$refs.content;
                let wrapperW = wrapper.offsetWidth;
                let contentW = content.offsetWidth;
                let leftP = 0;
                content.style.left = '0px';
                if(contentW <= wrapperW) {
                    return;
                }

                const renderDom = () => {
                    // requestAnimationFrame
                    // cancelAnimationFrame
                    this.timer = requestAnimationFrame(() => {
                        let nextLeftP = leftP + speed;
                        
                        if(!this.stop) {
                            if(nextLeftP > contentW + speed) {
                                leftP = 0;
                                content.style.left = '0px';  
                                this.delay();
                                
                            }else {
                                leftP = nextLeftP;
                                content.style.left = -nextLeftP + 'px';
                            }
                        }
                        renderDom();
                    })
                }

                renderDom();
            })
        }
    },
    deactivated() {
        cancelAnimationFrame(this.timer)
    },
    destroyed() {
        cancelAnimationFrame(this.timer);
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
}
.content {
    position: relative;
    left: 0px;
}
// .transtion {
//     // transition-duration: '';
//     transition-property: 'all';
//     transition-timing-function: 'linear';
//     // transition-delay: '';
// }

</style>